<template>
  <div class="comment">
    <div v-for="item in commentList
    " :key="item.id" class="item">
    <div class="header">
      <span>{{item.userNickName}}：</span>
      <span>{{item.createTime | timeFilter}}</span>
    </div>
    <div class="content">
      {{item.content}}
    </div>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
export default {
  name: 'Comment',
  data() {
    return {
      commentList: []
    }
  },
  filters: {
    timeFilter(val) {
      return val.match(/.+(?=\.)/g)[0].replace('T', ' ')
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    this.getOwnComment()
  },
  methods: {
    /**
     * 评价列表
     */
    getOwnComment() {
      const query = {
        userId: this.user.id,
        pageNum: 1,
        pageSize: -1
      }
      this.$api.shop.getOwnComment(query).then(res => {
        if (res.code === 200) {
          this.commentList = res.data.records
        }
      }).catch(() => {
      })
    }
  }
}
</script>
<style lang="less" scoped>
.comment{
  .item{
    width: 70%;
    margin: 0 auto;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
    background-color: #fff;
    .header{
      display: flex;
      flex-flow: row nowrap;
      justify-content: space-between;
      align-items: center;
    }
    .content{
      text-indent: 2em;
    }
  }
}
</style>
